<template>
	<view class="pageBox">
		<!--学习专区-->
		
		
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-bgcolor"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}"
			>
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
			
				<view class="header-box">
					<view class="header-item mr60" @click="changeTab(0)">
						<view :class="curTab=== 0 ? 'header-title-active ' : 'header-title'">学习专区</view>
						<view :class="curTab=== 0 ? 'header-line-active' : 'header-line'"></view>
					</view>
					<view class="header-item" @click="changeTab(1)">
						<view :class="curTab=== 1 ? 'header-title-active' : 'header-title'">最新资讯</view>
						<view :class="curTab=== 1 ? 'header-line-active' : 'header-line'"></view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<video 
				:src="item.file" 
				class="item-image" 
				controls
				 @ended="endVideo($event, item.id, index)"
				 @timeupdate="timeupdateVideo($event, index)"
				 ></video>
				<view class="item-title text-cut">{{item.title || ''}}</view>
				<view class="item-desc text-cut-3">{{item.describe || ''}}</view>
			</view>
		</view>
		
	
		<!-- 更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
		
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		
		<view class="footer-box">
			<view class="study-btn" @click="$wanlshop.to('/pages/new/examination')">报名考试</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			curTab:0,
			dataList:[
				// {
				// 	id:10,
				// 	file:'昵称',
				// 	title: 100,
				// 	describe:'13284845555',
				// }
			],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.getList();
	},
	onShow(){
		
	},
	computed: {
		...mapState(['common'])
	},
	// 触底加载更多
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getList();
		}
	},
	methods: {
		getList() {
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/study/video',
				data: {
					page: this.current_page,
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						res.data.data.forEach(function(value, index){
							value['min'] = 0;
						});
						
						that.dataList = [...that.dataList, ...res.data.data];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
		},
		endVideo(event, id, index){
			let min = this.dataList[index]['min'];
			
			uni.request({
				url: '/study/videouser',
				data: {
					id: id,
					min:min,
				},
				success: res => {
					res = res.res
					if (res.code === 1) {
					}
				}
			});
		},
		timeupdateVideo(e, index){
			let durationTime = Number(e.detail.duration);   
			let min = durationTime/60;
			min = parseFloat(min).toFixed(2);
			this.dataList[index]['min'] = min;
		},
		changeTab(type){
			this.curTab = type;	
			if(type === 0){
				uni.redirectTo({
					url:'/pages/new/study'
				})
				return false;
			}
		
			if(type === 1){
				uni.redirectTo({
					url:'/pages/new/article'
				})
				return false;
			}
		},
	}
}
</script>

<style scoped lang="scss">
.list{
	margin: 34rpx 22rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	
	.list-item{
		width: 710rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		padding-bottom: 24rpx;
	}
	
	.item-image{
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		width: 710rpx;
		height: 400rpx;
	}
	
	.item-title{
		width: 662rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 35rpx;
		margin-top: 20rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	
	.item-desc{
		margin-top: 8rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		width: 662rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #707070;
		line-height: 28rpx;
	}
}

.footer-box{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0rpx;
	background-color: #ffffff;
	width: 100%;
	padding: 20rpx 30rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	z-index: 9;
	
	.study-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		background: #9C3728;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 35rpx;
	}
}

.header-box{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
	width: 100%;
	position: relative;
	
	/*#ifdef MP-WEIXIN*/
	margin-top: 0rpx !important;
	/*#endif*/
	
	.add-image{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: 32rpx;
		top: -4rpx;
	}
	
	.header-item{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.header-title{
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #87888A;
		line-height: 40rpx;
	}
	
	.header-title-active{
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #111111;
		line-height: 40rpx;
	}
	
	.header-line{
		width: 32rpx;
		height: 6rpx;
		background: rgba(255,255,255,0);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin-top: 10rpx;
	}
	
	.header-line-active{
		width: 32rpx;
		height: 6rpx;
		background: #9C3728;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin-top: 10rpx;
	}
	
	.mr60{
		margin-right: 60rpx;
	}
}


</style>